<template>
  <div class="container">
    <!-- header -->
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>物业服务</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/VisitorRecord' }">
          访客记录
        </el-breadcrumb-item>
      </el-breadcrumb>
      <h1>访客记录</h1>
    </div>
    <!-- search-box -->
    <div class="search-box">
      <el-form :model="searchData">
        <el-form-item label="访问状态">
          <el-select
            v-model="searchData.accessStatus"
            placeholder="请选择住户类型"
          >
            <el-option
              v-for="v in accessStatusOption"
              :label="v.label"
              :value="v.value"
              :key="v.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="投诉人">
          <el-input v-model="searchData.complainant" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- list -->
    <div class="list">
      <div class="list-title">
        <div>报修列表</div>
        <div class="operation-box">
          <el-button type="default">批量操作</el-button>
        </div>
      </div>
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        stripe
        :cell-style="cellStyle"
        :header-row-style="headerStyle"
        @selection-change="handleSelectionChange"
      >
        <el-table-column property="id" type="selection" width="55" />
        <el-table-column property="visitHouse" label="访问房屋" width="204">
          <template #default="scope">{{ scope.row.visitHouse }} </template>
        </el-table-column>
        <el-table-column
          property="visitorName"
          label="访客姓名"
          width="120"
          align="center"
        />
        <el-table-column property="status" label="状态" />
        <el-table-column property="sex" label="访客性别" />
        <el-table-column width="130" property="tel" label="访客手机号码" />
        <el-table-column property="date" label="访问日期">
          <template #default="scope"
            >{{ scope.row.date == null ? '' : scope.row.date.split(' ')[0] }}
          </template>
        </el-table-column>
        <el-table-column property="duration" label="访问时长" />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              text
              @click="handleEdit(scope.$index, scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="list-footer">
        <!-- page -->
        <Page></Page>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Page from '../../../components/YPage.vue';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElTable } from 'element-plus';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter();
const searchData = reactive({
  accessStatus: '',
  complainant: '',
});
const accessStatusOption = [
  { label: '全部', value: '全部' },
  { label: '待生效', value: '待生效' },
  { label: '生效中', value: '生效中' },
  { label: '已失效', value: '已失效' },
];
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

const onSubmit = () => {
  console.log('submit!');
};

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};

//table
const cellStyle = ref({ height: '60px', fontSize: '15px' });
const headerStyle = ref({ height: '60px', fontSize: '15px', color: 'black' });
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
const handleEdit = (index: number, row: User) => {
  console.log(index, row);
  router.push({path:'/home/AccessDetails'})
};
const handleDelete = (index: number, row: User) => {
  console.log(index, row);
};
const page = ref(1);
const count = ref(5);
const total = ref(0);
interface User {
  id: number;
  visitHouse: string;
  visitorName: string;
  status: string;
  sex: string;
  date: string;
  tel: string;
  duration: string;
}
const tableData = ref<User[]>([]);
const getData = () => {
  axios({
    url: '/visitor/list',
    params: {
      page: page.value,
      limit: count.value,
      visitorName: searchData.complainant,
      visitStateId: searchData.accessStatus,
    },
  }).then(({ data }) => {
    if (data.code == '0') {
      total.value = data.total;
      let arr: User[] = [];
      data.data.forEach((v) => {
        arr.push({
          id: v.id,
          visitHouse: v.visitorHouse.room,
          visitorName: v.visitorName,
          status: v.visitState.visitState,
          sex: v.sex.sexType,
          date: v.date,
          tel: v.phone,
          duration: v.duration,
        });
      });
      tableData.value = arr;
    } else {
      ElMessage.error('加载失败！');
    }
  });
};
onMounted(() => {
  getData();
});
//page
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  .header {
    width: 1136px;
    height: 97px;
    background: #fff;
    margin-top: 25px;
    border-bottom: 1px solid #f0f2f5;
    .el-breadcrumb {
      height: 37px;
      line-height: 37px;
      font-size: 14px;
      margin-left: 30px;
      :deep(.el-breadcrumb__item:first-child .el-breadcrumb__inner) {
        color: #aaadb4;
      }
    }
    h1 {
      height: 60px;
      line-height: 60px;
      margin-left: 30px;
      font-family: 'Microsoft Tai Le Bold', 'Microsoft Tai Le', sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
    }
  }
  .search-box {
    width: 1136px;
    height: 80px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-form {
      width: 95%;
      height: 80px;
      display: flex;
      justify-content: space-between;
      align-content: center;
      .el-form-item {
        width: 300px;
        display: flex;
        align-items: center;
        :deep(.el-form-item__content) {
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
  }
  .list {
    width: 1136px;
    background: #fff;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    .list-title {
      width: 95%;
      height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 16px;
        line-height: 28px;
      }
    }

    .list-footer {
      width: 95%;
      height: 100px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
</style>
